<template>
	<!-- 赵笛 2023年4月9日 -->
	<!-- 个人信息页面-->
	<view>
		<u-avatar :src="userData.avatarUrl" size="100" class="avatar-box"></u-avatar>
		<view class="avatar-text">
			<!-- 更换头像 -->
		</view>
		<view>
			<view class="p-box">
				<u-row>
					<u-col span="3" >
						<b class="text-label">用户昵称</b>
					</u-col>
					<u-col span="8">
						<span class="text-value" v-if="!input1">{{userData.nickName}}</span>
						<u--input
							style="display: inline-block;"
							color="#999999"
							fontSize="14"
							:placeholder="userData.nickName"
							border="bottom"
							v-if="input1"
							v-model="userData.nickName"
						></u--input>
					</u-col>
					<u-col span="1">
						<u-icon name="edit-pen" class="right" @click="showInput1()" v-if="!input1"></u-icon>
						<u-icon name="checkmark" class="right" @click="showInput1()" v-if="input1"></u-icon>
					</u-col>
				</u-row>
			</view>
			<view class="p-box">
				<u-row>
					<u-col span="3" >
						<b class="text-label">性别</b>
					</u-col>
					<u-col span="8">
						<span class="text-value">{{userData.gender === 0?'男':'女'}}</span>
					</u-col>
					<u-col span="1">
						<u-icon name="edit-pen" class="right"  @click="showInput2()"></u-icon>
					</u-col>
				</u-row>
			</view>
			<view class="p-box">
				<u-row>
					<u-col span="3" >
						<b class="text-label">电子邮箱</b>
					</u-col>
					<u-col span="8">
						<span class="text-value">{{userData.mail}}</span>
					</u-col>
					<u-col span="1">
						<u-icon name="edit-pen" class="right" @click="showInput3()"></u-icon>
					</u-col>
				</u-row>
			</view>
			<view class="p-box">
				<u-row>
					<u-col span="3" >
						<b class="text-label">手机号</b>
					</u-col>
					<u-col span="8">
						<span class="text-value" v-if="!input4">{{userData.phone}}</span>
						<u--input
							style="display: inline-block;"
							color="#999999"
							fontSize="14"
							:placeholder="userData.phone"
							border="bottom"
							v-if="input4"
							v-model="userData.phone"
						></u--input>
					</u-col>
					<u-col span="1">
						<u-icon name="edit-pen" class="right" v-if="!input4" @click="showInput4()"></u-icon>
						<u-icon name="checkmark" class="right" v-if="input4" @click="showInput4()"></u-icon>
					</u-col>
				</u-row>
			</view>
			<view class="p-box" style="height: 30px;" @click="toAddressManagement">
					<b class="text-label" style="float: left;">地址管理</b>
				<p style="margin-left: 65%;float: left;">></p>
			</view>
		</view>
		<u-popup :show="popupShow" mode="bottom" closeable="true"
		@close="popupClose">
			<view class="popup-box">
				<!-- 性别单选框 -->
				<u-radio-group
					v-if="input2"
					v-model="userData.gender"
					placement="column"
					@change="groupChange"
					>
					<u-radio
					:customStyle="{marginBottom: '8px'}"
					:key="0"
					:label="'男'"
					:name="0"
					@change="radioChange"
					>
					</u-radio>
					<u-radio
					:customStyle="{marginBottom: '8px'}"
					:key="1"
					:label="'女'"
					:name="1"
					@change="radioChange"
					>
					</u-radio>
				</u-radio-group>
				<!-- 电子邮箱输入框 -->
				<view v-if="input3">
					<u-row>
						<u-col span="4" class="text-label">
							旧电子邮箱
						</u-col>
						<u-col span="8" class="text-value">
							{{userData.mail}}
						</u-col>
					</u-row>
					<u-row>
						<u-col span="8" class="text-label">
							<u--input class="left"style="display: inline-block;
							border-bottom:1px solid #dcdcdc"
							color="#666666"
							fontSize="14"
							placeholder='请输入验证码'
							v-model="vcode1"
							@blur="checkMailVerificationCode(userData.mail,vcode1,0)"></u--input>
						</u-col>
						<u-col span="4" class="text-value">
							<u-button type="primary"
							:plain="true"
							size="small"
							text="发送验证码"
							class="yzm-button"
							color="#3CCCA6"
							@click="sendMailVerificationCode(userData.mail,0)"></u-button>
						</u-col>
					</u-row>
				</view>
				<p class="line-box" v-if="newMailShow">
					<u-row>
						<u-col span="4" class="text-label">新电子邮箱</u-col>
						<u-col span="8" class="text-label">
							<u--input style="width: 100%;
							border-bottom:1px solid #dcdcdc"
							type="email"
							color="#666666"
							fontSize="14"
							placeholder='请输入您要绑定的电子邮箱'
							v-model="newMail"></u--input>
						</u-col>
					</u-row>
				</p>
				<p class="line-box" v-if="newMailShow">
					<u-row>
						<u-col span="8" class="text-label">
							<u--input class="left"style="display: inline-block;
							border-bottom:1px solid #dcdcdc"
							color="#666666"
							fontSize="14"
							placeholder='请输入验证码'
							v-model="vcode2"
							@blur="checkMailVerificationCode(newMail,vcode2,1)"></u--input>
						</u-col>
						<u-col span="4" class="text-value">
							<u-button type="primary"
							:plain="true"
							size="small"
							text="发送验证码"
							class="yzm-button"
							color="#3CCCA6"
							@click="sendMailVerificationCode(newMail,1)"></u-button>
						</u-col>
					</u-row>
				</p>
			</view>
		</u-popup>
		<view class="bottom-box">
			<u-button text="保存修改" class="button-box" @click="updateUserInfo()"></u-button>
		</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				//登录用户
				userData:{},
				//输入框显示隐藏
				input1:false,
				input2:false,
				input3:false,
				input4:false,
				//底部弹出层显示隐藏
				popupShow:false,
				//用户输入的验证码（解绑）
				vcode1:'',
				//用户输入的验证码（绑定）
				vcode2:'',
				//新邮箱输入框
				newMailShow:false,
				//新邮箱
				newMail:'',
			}
		},
		methods: {
			//修改当前用户信息
			updateUserInfo(){
				this.$myRequest({
					url: '/user/info/updateUserInfo',
					method: 'POST',
					data: this.userData
				}).then(res => {
					if(res.data.flag){
						uni.showToast({
							icon: 'success',
							title: '修改成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
						//跳转至“我的”页面
						uni.switchTab({
							url:'/pages/my/My'
						})
					}else{
						uni.showToast({
							icon: 'warning',
							title: '修改失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
					location.reload()
				})
			},
			//发送邮箱验证码
			sendMailVerificationCode(mail,operationStatus){
				//解绑邮箱的验证码
				this.$myRequest({
					url: '/user/info/sendMailVerificationCode',
					data: {
						mail: mail,
						operationStatus: operationStatus
					}
				}).then(res => {
					if(res.data.flag){
						uni.showToast({
							icon: 'success',
							title: '发送成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}else{
						uni.showToast({
							icon: 'error',
							title: '发送失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			},
			//校验验证码
			checkMailVerificationCode(mail,vcode,operationStatus){
				//解绑邮箱的验证码
				this.$myRequest({
					url: '/user/info/checkMailVerificationCode',
					data: {
						mail: mail,
						vcode: vcode
					}
				}).then(res => {
					if(res.data.flag){
						//解绑操作
						if(operationStatus===0){
							//显示绑定新邮箱的输入框
							this.newMailShow = true
							uni.showToast({
								icon: 'success',
								title: '请绑定新的邮箱',
								// 显示时长时间为3秒
								duration: 3000,
							})
						}
						//绑定操作
						else{
							//设置新的邮箱
							this.userData.mail = this.newMail
							this.popupShow = false
							uni.showToast({
								icon: 'success',
								title: '提交修改以绑定新邮箱',
								// 显示时长时间为3秒
								duration: 3000,
							})
						}
					}else{
						uni.showToast({
							icon: 'error',
							title: '验证码错误',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			},
			
			//显示修改昵称输入框
			showInput1(){
				this.input1 = !this.input1
			},
			showInput2(){
				this.input2 = true
				this.input3 = false
				this.popupShow = !this.popupShow
			},
			showInput3(){
				this.popupShow = !this.popupShow
				this.input2 = false
			if(this.userData.mail === null){
				this.newMailShow = true
				console.log(this.newMailShow)
				this.input3 = false
			}else{
				this.newMailShow = false
				this.input3 = true
			}
			},
			showInput4(){
				this.input4 = !this.input4
			},
			//关闭底部弹出层
			popupClose(){
				this.popupShow = false
			},
			// 跳转至地址管理页面
			toAddressManagement(){
				uni.navigateTo({
					url:"/pages/my/AddressManagement"
				})
			}
		},
		onLoad() {
			this.userData = wx.getStorageSync('user')
		}
	}
</script>

<style lang="scss" scoped>
	/*公共样式 ↓*/
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.p-box{
		width:90%;
		margin:0 auto;
		line-height: 24px;
		padding:10px 0;
		border-top: 1px solid #f5f5f5;
	}
	.text-label{
		width:100px;
		display:inline-block;
		font-size:14px;
		color:#666666;
		font-weight: bold;
	}
	.text-value{
		font-size:14px;
		color:#666666;
	}
	.line-box{
		display:inline-block;
		font-size:14px;
		color:#666666;
		padding:10px 0;
	}
	/*公共样式 ↑*/
	
	.avatar-box{
		margin: 0 auto;
		margin-top:40px;
	}
	.avatar-text{
		margin:10px 0;
		text-align: center;
		font-size:14px;
		color: #E06181;
	}
	.popup-box{
		width:100%;
		padding:20px;
	}
	.yzm-button{
		width:120px;
		float:left;
	}
	
	.bottom-box{
		width:100%;
		height:40px;
		position:fixed;
		bottom:0;
		left:0;
		background-color: aqua;
	}
	.button-box {
		color: #ffffff;
		background: #3CCCA6;
		border: none;
		border-radius: 0;
	}
	.button-box:after{
		border: none;
	}
</style>
